import React from 'react';
import { Modal, Form, Input, message } from 'antd';

const FormItem = Form.Item;
const BindingEditForm = Form.create()(
  (props) => {
    const { visible, onCancel, onCreate,
      form, handleSubmit } = props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    return (
      <Modal
        visible={visible}
        title="修改绑定关系"
        okText="确认"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Form layout="vertical" onSubmit={handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="T-box设备ID"
          >
            {getFieldDecorator('deviceId', {
              rules: [{
                required: false, message: '请输入设备编号',
              }],
            })(
              <Input placeholder="请输入设备编号" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="VIN"
          >
            {getFieldDecorator('vin', {
              rules: [{
                required: false, message: '请输入新的分类名',
              }],
            })(
              <Input placeholder="请输入要绑定的VIN号" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="sim"
          >
            {getFieldDecorator('sim', {
              rules: [{
                required: false, message: '请输入sim',
              }],
            })(
              <Input placeholder="请输入要绑定的sim号" />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
);

class BindingEditModal extends React.Component {
  componentWillMount() {
  }
  componentDidMount() {
    const { bindingData } = this.props;
    const { form } = this;
    form.setFieldsValue({
      deviceId: bindingData.deviceId,
      vin: bindingData.vin,
      sim: bindingData.sim,
    });
  }
  handleCancel = () => {
    const { form } = this;
    form.resetFields();
    this.props.changeVisible();
  }

  handleCreate = () => {
    const { form } = this;
    const { dispatch } = this.props;
    const { changeVisible } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      dispatch({
        type: 'tbox/bindingedit',
        payload: values,
        callback: (data) => {
          if (data.statusCode === '0') {
            message.success('操作成功');
          } else {
            message.error(data.statusMessage, 3);
          }
        },
      }).then(() => {
        dispatch({
          type: 'tbox/fetch',
        });
      });
      form.resetFields();
      changeVisible();
    });
  }
  saveFormRef = (form) => {
    this.form = form;
  }

  render() {
    return (
      <div>
        <BindingEditForm
          ref={this.saveFormRef}
          visible={this.props.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
          handleSubmit={this.handleCreate}
        />
      </div>
    );
  }
}

export default BindingEditModal;
